<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>学习计划</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.css" />
    <style>
        body {
            background-color: #fff;
        }

        .test {
            position: relative;
        }

        .list {
            height: 32px;
            font-size: 13px;
            line-height: 32px;
            border-bottom: 2px solid #dadada;
            display: -webkit-box;
            overflow-x: auto;
            /*适应苹果*/
            -webkit-overflow-scrolling: touch;
        }

        .list::-webkit-scrollbar {
            display: none;
        }

        .child {
            padding: 0px 29px;
            text-align: center;
            color: #858585;
            height: 30px;
        }

        .img {
            float: left !important;
            width: 68px !important;
            height: 66px !important;
            border-radius: 50% !important;
            margin-top: 18px !important;
        }

        .content {
            padding-left: 10px;
            padding-top: 23px;
            float: left;
            width: 73%;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .image {
            width: 32px !important;
            height: 32px !important;
            position: absolute;
            top: 33px;
            right: 20px;
            z-index: 999;
        }

        .lists {
            padding: 8px 10px 0px;
        }

        .childlist {
            width: 50%;
            float: left;
            padding: 0px 6px;
        }

        .title_set {
            font-size: 15px;
            margin-top: 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .set {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 13px;
            color: #757575;
        }

        .date {
            font-size: 12px;
            position: absolute;
            bottom: 1px;
            right: 0px;
            font-weight: 400;
            color: #757575;
        }

        .title {
            height: 27px;
            line-height: 27px;
            background-color: #e5e5e5;
            display: -webkit-box;
            overflow-x: auto;
            /*适应苹果*/
            -webkit-overflow-scrolling: touch;
        }

        .title::-webkit-scrollbar {
            display: none;
        }

        .tupian {
            width: 100%;
            padding-bottom: 51.5%;
            position: relative;
        }

        .tupian img {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            width: 100%;
            height: 100%;
            border-radius: 5px;
        }

        .text {
            width: 100%;
            text-align: center;
            height: 104px;
            position: absolute;
            margin-top: -52px;
            top: 50%;
        }

        .text img {
            width: 90px;
            margin: 0 auto;
            display: block;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div id="vm" v-cloak>
        <div class="lists" v-if="!iskong">
            <div class="childlist" @click="Openjieshao(item)" v-for="item in videogetlists">
                <div class="tupian">
                    <!-- <span class="videotype"   :class="{videotypedaka:item.video_type==3,videotypemianfei:item.video_type==1}">{{videotype(item.video_type)}}</span> -->
                    <img v-bind:src="item.img" alt="">
                </div>
                <div style="height:66px">
                    <div class="title_set aui-ellipsis-1" v-html="item.video_name"></div>
                    <p class="set aui-ellipsis-1">{{item.video_introduce_small}}</p>
                    <!-- <p style="font-size: 13px;  color: #757575;" class="aui-ellipsis-1 test">观看次数：{{item.watch_count}}次</p> -->
                </div>
            </div>

            <div class="aui-clearfix"></div>

        </div>
        <div class="text" v-else>
            <img src="../../image/home/cat_1.png" alt="">
            <div style="font-size:16px;color:#C8C8C8;margin-top:12px;">暂无内容</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript">
    var uid = $api.getStorage('uid');
    var erjidiv;
    var vm = new Vue({
        el: '#vm',
        data: {
            videogetlists: [], //视频列表
            erjiid: '', //二级id
            page: 1,
            iskong: false
        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();
                api.parseTapmode();
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }
                var header = $api.byId('head_div');
                $api.fixStatusBar(header);
                _this.erjiid = api.pageParam.erjiid;
                 erjidiv = api.pageParam.erjidiv

                _this.videlist(_this.erjiid);

                api.addEventListener({
                    name: 'scrolltobottom',
                    extra: {
                        threshold: 80 //设置距离底部多少距离时触发，默认值为0，数字类型
                    }
                }, function(ret, err) {
                  if(!_this.iskong){

                    _this.page = _this.page + 1;
                    _this.videlist(_this.erjiid);
                    api.sendEvent({
                        name: 'gao',
                        extra: {
                            key1: true,
                        }
                    });
                  }
                });

                api.addEventListener({
                    name: 'erjiclick'
                }, function(ret, err) {
                    _this.erjiid = ret.value.erjiid;
                    _this.page = 1;
                    _this.videogetlists = [];
                    _this.videlist(_this.erjiid);
                });
                api.addEventListener({
                    name: 'erjiclick1'
                }, function(ret, err) {
                    _this.erjiid = ret.value.erjiid;
                    _this.page = 1;
                    _this.videogetlists = [];
                    _this.videlist(_this.erjiid);

                });

                api.setRefreshHeaderInfo({
                    visible: true,
                    loadingImg: 'widget://image/refresh.png',
                    bgColor: '#ccc',
                    textColor: '#fff',
                    textDown: '下拉刷新...',
                    textUp: '松开刷新...',
                    showTime: true
                }, function(ret, err) {
                    _this.page = 1
                    _this.videogetlists = []
                    _this.videlist(_this.erjiid);
                    api.refreshHeaderLoadDone(); // 移除这个效果
                    api.sendEvent({
                        name: 'gao',
                        extra: {
                            key1: false,
                        }
                    });
                });


            }
        },
        methods: {
            init: function() {
                var _this = this;

            },
            //视频的二级的id，获取id下的所有视频
            videlist: function(leader_id) {
                var _this = this;
                _this.leader_id = leader_id
                new rest().get('videogetlist').datae({
                    leader_id: leader_id,
                    page: _this.page
                }).success(function(res) {
                    if (res.flag == 1) {
                        if (res.msg.length == 0) {
                            if (_this.page == 1) {
                                _this.iskong = true;
                            } else {
                                _this.iskong = false;
                                _this.page = _this.page;
                                api.toast({
                                    msg: '没有更多了',
                                    duration: 2000,
                                    location: 'middle'
                                });
                            }
                        } else {
                            _this.iskong = false;
                            _this.videogetlists = _this.videogetlists.concat(res.msg);
                            // scroll()

                        }
                    }
                }).run()
            },

            //打开详情页面。
            Openjieshao: function(item) {
                var _this = this;
                if (uid) {
                    var data1 = {
                        video_id: item.video_id,
                        uid: uid
                    }
                } else {
                    var data1 = {
                        video_id: item.video_id,
                        uid: ''
                    }
                }
                new rest().get('getDetail').datae(data1).success(function(res) {
                    console.log(JSON.stringify(res))
                    if (res.flag == 1) {
                        if (item.video_id) {
                            apicmmon.openwin('videodetail_win', '../VIP/videodeail.html', {
                                videoid: item.video_id
                            })
                        } else {
                            apicmmon.openwin('author', '../VIP/free_video.html')
                        }
                    } else {
                        api.toast({
                            msg: '视频不存在',
                            duration: 2000,
                            location: 'middle'
                        });
                    }
                }).error(function(err) {
                    console.log(JSON.stringify(err))
                }).run()

            },
            videotype: function(res) {
                if (res == 2) {
                    return 'VIP'
                } else if (res == 3) {
                    return '大咖'
                } else {
                    return '免费'
                }
            },

        }
    })


    // function scroll(erjidiv) {
    //
    //     window.onscroll = function() {
    //         var scrollTop = document.documentElement.scrollTop | document.body.scrollTop;
    //         console.log(scrollTop)
    //         if(scrollTop==0){
    //           api.sendEvent({
    //               name: 'gao',
    //               extra: {
    //                   key1: true,
    //               }
    //           });
    //         }
    //
    //     }
    // }
</script>

</html>
